<template>
  <div class="container">
    <h1 class="title">🌸 私人照片集</h1>

    <!-- 上传控件 -->
    <div class="upload-box">
      <label class="upload-btn">
        📸 点击上传图片
        <input type="file" accept="image/*" @change="handleUpload" />
      </label>
    </div>

    <!-- 照片展示区 -->
    <div class="gallery">
      <div
        v-for="photo in photos"
        :key="photo.id"
        class="photo-card"
        @click="openModal(photo)"
      >
        <img :src="photo.thumbnail" />
        <div class="caption">{{ photo.title }}</div>
        <button class="delete-btn" @click.stop="deletePhoto(photo.id)">X</button>
      </div>
    </div>

    <!-- 模态大图 -->
    <div class="modal" v-if="selectedPhoto" @click.self="selectedPhoto = null">
      <div class="modal-content">
        <img :src="selectedPhoto.full" />
        <p>{{ selectedPhoto.title }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      photos: [],
      selectedPhoto: null,
      nextId: 1,
    };
  },
  mounted() {
    const saved = localStorage.getItem("myPhotos");
    if (saved) {
      this.photos = JSON.parse(saved);  // 从 localStorage 获取保存的图片列表
      this.nextId = this.photos.length
        ? Math.max(...this.photos.map((p) => p.id)) + 1
        : 1; // 继续计数 ID
    }
  },
  methods: {
    handleUpload(event) {
      const file = event.target.files[0];
      if (!file) return;

      // 读取图片
      const reader = new FileReader();
      reader.onload = (e) => {
        const base64 = e.target.result;
        const newPhoto = {
          id: this.nextId++, // 自增 ID
          title: file.name,  // 设置标题为文件名
          thumbnail: base64, // 图片预览
          full: base64,      // 使用同一个 base64 作为全图
        };

        this.photos.unshift(newPhoto); // 新照片放在最前面
        this.savePhotos(); // 保存到 localStorage
      };
      reader.readAsDataURL(file); // 以 base64 格式读取图片
    },
    openModal(photo) {
      this.selectedPhoto = photo;
    },
    deletePhoto(id) {
      this.photos = this.photos.filter((p) => p.id !== id); // 删除照片
      this.savePhotos(); // 更新 localStorage
    },
    savePhotos() {
      localStorage.setItem("myPhotos", JSON.stringify(this.photos)); // 保存到 localStorage
    },
  },
};
</script>

<style scoped>
body {
  background-color: #fdf7f2;
}
.container {
  max-width: 960px;
  margin: auto;
  padding: 20px;
  font-family: "Hiragino Kaku Gothic ProN", "Microsoft YaHei", sans-serif;
}
.title {
  text-align: center;
  font-size: 28px;
  margin-bottom: 20px;
  color: #cc6688;
}
.upload-box {
  text-align: center;
  margin-bottom: 20px;
}
.upload-btn:hover {
  background-color: #e5a4a6;
  transform: scale(1.05);
}

.upload-btn input {
  display: none; /* 隐藏默认的文件输入框 */
}
.upload-btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #f7c6c7;
  color: white;
  font-size: 18px;
  font-weight: 500;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.photo-card {
  width: 200px;
  background: #ffcccc;
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 8px;
  transition: transform 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.photo-card:hover {
  transform: translateY(-3px);
}
.photo-card img {
  width: 100%;
  border-radius: 12px;
}
.caption {
  text-align: center;
  margin-top: 6px;
  font-size: 14px;
  color: #666;
}
.delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #f9f9f9;
  border: none;
  border-radius: 8px;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 12px;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 16px;
  max-width: 90%;
  max-height: 90%;
  text-align: center;
}
.modal-content img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 10px;
}
</style>
